<template>
	<view class="col">
		<view class="col-title">
			<view class="lable fs26 fw600" style="color: #0085ff">{{ data.lable }}:</view>
			<view class="title fs26 fw600" style="color: #0085ff">{{ data.title }}</view>
		</view>
		<view class="col-title flex-vc">
			<view class="lable fs26 fw600">是否落实:</view>
			<view class="title fs26">
				<u-radio-group v-model="data.isPracticable" size="32rpx">
					<u-radio v-for="(item, index) in radioList" :key="index" :name="item.value">
						<text class="fs26"> {{ item.name }}</text>
					</u-radio>
				</u-radio-group>
			</view>
		</view>
		<view v-show="!data.isPracticable" class="col-content">
			<view class="cont-row">
				<view class="label fs26 fw600">存在问题:</view>
				<view class="content">
					<u-input
						v-model="data.problem"
						class="fs26"
						type="textarea"
						:border="true"
						:height="180"
						placeholder="请输入内容"
					/>
				</view>
			</view>
			<view class="cont-row mt10">
				<view class="label fs26 fw600">整改要求:</view>
				<view class="content">
					<u-input
						v-model="data.rectification"
						class="fs26"
						type="textarea"
						:border="true"
						:height="180"
						placeholder="请输入内容"
					/>
				</view>
			</view>
			<view class="cont-row mt10 flex-vc">
				<view class="label fs26 fw600">整改时限:</view>
				<view class="content" @click="showTimeEv">
					<view class="time-box">
						<u-icon name="clock" :size="30"></u-icon>
						<text class="ml10"> {{ data.rectificationTime }}</text>
					</view>
				</view>
			</view>
			<view class="cont-row mt10 flex-vc">
				<view class="label fs26 fw600">照片上传:</view>
				<view class="content">
					<uni-file-picker
						limit="2"
						title="最多选择2张图片"
						@select="fileSelect"
						@delete="fileDelete"
					></uni-file-picker>
				</view>
			</view>
		</view>

		<u-picker
			mode="time"
			:default-time="data.rectificationTime"
			v-model="timeShow"
			:params="timeParams"
			@confirm="confirmTime"
		></u-picker>
	</view>
</template>
<script>
	import sjsbApi from '@/api/yjzh/sjsb.js'
	export default {
		name: 'colValue',
		components: {},
		props: {
			data: {
				type: Object,
				default: () => {
					return {
						lable: '',
						title: '',
						isPracticable: true,
						problem: '',
						rectification: '',
						rectificationTime: '',
						content: '',
						fileUrl: ''
					}
				}
			}
			// folderName: {
			// 	type: String,
			// 	default: () => ''
			// }
		},
		data() {
			return {
				// data: {
				// 	lable: '检查项目1',
				// 	title: '自动雨水情监测站点及预警设施设备运行及使用维护是否正常',
				// 	isPracticable: false,
				// 	problem: '',
				// 	rectification: '',
				// 	rectificationTime: '',
				// 	content: ''
				// },
				radioList: [
					{ name: '是', value: true },
					{ name: '否', value: false }
				],
				timeShow: false,
				timeParams: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: false
				},

				fileList: []
			}
		},
		computed: {},
		mounted() {},
		methods: {
			showTimeEv() {
				this.timeShow = true
			},
			confirmTime(value, index) {
				this.data.rectificationTime = `${value.year}-${value.month}-${value.day} ${value.day}:${value.minute}`
			},
			async fileSelect(data) {
				let el = data.tempFiles
				let file = await this.httpRequest(el[0].path, el[0].name)
				await this.uploadEv(file)
				if (data.tempFiles.length > 1) {
					let file2 = await this.httpRequest(el[1].path, el[1].name)
					this.uploadEv(file2)
				}
			},
			async fileDelete(data) {
				const index = this.fileList.findIndex((el) => el.indexOf(data.tempFile.name) > -1)
				if (index > -1) {
					const resp = await sjsbApi.deleteFileByUrl({ fileUrl: this.fileList[index] })
					if (resp.code == 200) {
						uni.showToast({
							icon: 'info',
							title: '删除成功'
						})
						this.fileList.splice(index, 1)
					}
				}
			},
			async uploadEv(file) {
				console.info(`v:`, sjsbApi)
				const formData = new FormData()
				formData.append('file', file)
				formData.append('folderName', this.folderName || '')
				const resp = await sjsbApi.uploadReturnUrl(formData)
				if (resp.code == 200) {
					uni.showToast({
						icon: 'info',
						title: '添加成功'
					})
					// this.$emit('changeFolderName', resp.data.folderName)
					this.folderName = resp.data.folderName
					this.data.fileUrl = this.folderName
					console.info(`	this.data:`, this.data)
					this.fileList.push(resp.data.fileUrl)
				}
			},
			httpRequest(src, name) {
				let that = this
				return new Promise((resolve, reject) => {
					let xhr = new XMLHttpRequest()
					xhr.open('GET', src, true)
					xhr.responseType = 'blob'
					xhr.onload = function (e) {
						if (this.status == 200) {
							let myBlob = this.response
							let files = new window.File([myBlob], name, { type: myBlob.type }) // myBlob.type 自定义文件名
							resolve(files)
						} else {
							reject(false)
						}
					}
					xhr.send()
				})
			}
		}
	}
</script>
<style lang="less" scoped>
	.col {
		width: 100%;
		.col-title {
			display: flex;
			width: 100%;
			.lable {
				width: 170rpx;
				text-align: right;
			}
			.title {
				flex: 1;
				margin-left: 20rpx;
				padding-right: 25rpx;
			}
		}
		.col-content {
			width: 100%;
			background: #edf5ff;
			box-shadow: inset 0rpx 10rpx 30rpx rgba(0, 133, 255, 0.12);
			padding: 25rpx 5rpx;
			.cont-row {
				display: flex;
				.label {
					width: 170rpx;
					text-align: right;
				}
				.content {
					flex: 1;
					margin-right: 10rpx;
					margin-left: 10rpx;
					.time-box {
						width: 100%;
						height: 66rpx;
						display: flex;
						align-items: center;
						border: 1rpx solid rgba(174, 174, 174, 0.4);
						border-radius: 4rpx;
						padding-left: 15rpx;
					}
					/deep/.file-picker__box-content {
						border-color: rgba(0, 0, 0, 0.4) !important;
						.icon-add {
							background-color: #999;
						}
					}
				}
			}
		}
	}
</style>
